<template>
	<view class="Prompt">
		<uni-popup :show="Mark" position="middle" mode="fixed" @hidePopup="cancel()">
			<view class="taost text--center border-radius-5 reals py30 por">
				<view class="f18 text-white fwb500 letspace fwb500">{{ ShowTitle.title ? ShowTitle.title : '温馨提示' }}</view>
				<view class="fl4 default mt25">{{ ShowTitle.content ? ShowTitle.content : '内容提示' }}</view>
				<view class="fl4 default mt5" v-if="ShowTitle.remarks">{{ ShowTitle.contents ? ShowTitle.contents : '' }}<text class="color-pink ml8">{{ ShowTitle.remarks ? ShowTitle.remarks : '' }}</text></view>
				<view class="realbtn btndefault bor20 text-white fl6 letspace py10" @click="confirm()">{{ ShowTitle.confirm ? ShowTitle.confirm : '确认' }}</view>
				<image src="/static/home/close.png" class="closeimg" @click="cancel()"></image>
			</view>
		</uni-popup>
	</view>
</template>
<!-- this.ShowTitle = {
		title:'标签',
		content:'内容',
		contents:'备注前提',
		remarks:'备注内容即粉色字体',
		success(){
			console.log('用户点击确定按钮触发')
		},
		error(){
			console.log('用户点击取消按钮触发')
		}
	} -->
<script>
export default {
	props: ['ShowTitle'],
	data() {
		return {
			Mark: false
		};
	},
	methods: {
		showModel() {
			this.Mark = true;
		},
		confirm() {
			this.Mark = false;
			if (typeof this.ShowTitle.success === 'function') {
				this.ShowTitle.success();
			}
		},
		cancel() {
			this.Mark = false;
			if (typeof this.ShowTitle.error === 'function') {
				this.ShowTitle.error();
			}
		}
	},
	watch: {
		ShowTitle() {
			this.Mark = true;
		}
	}
};
</script>

<style lang="less">
.color-pink {
	color: #f4376d;
}
.reals {
	width: 600rpx;

	.realbtn {
		width: 320rpx;
		margin: 68rpx auto 0 auto;
	}

	.closeimg {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top: 36rpx;
		right: 44rpx;
	}
}
@keyframes fade {
	0% {
		transform: translate(-50%, -250%);
	}
	100% {
		transform: translate(-50%, -50%);
	}
}
</style>
